<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta charset="utf-8" />
		<title>手印信息</title>
			<link rel="stylesheet" href="jquery-easyui-1.5.3/themes/default/easyui.css">
		<link href="jquery-easyui-1.5.3/themes/icon.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/hjwz.css" />
        <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="font_jjkmvgsdpk/iconfont.js"></script>
	    <link rel="stylesheet" href="font_jjkmvgsdpk/iconfont.css">
	    <script src="font_5orzif3vv0i/iconfont.js"></script>
	</head>
	<body>
		<!--
        	批量上传窗口
        -->

		<div id="handpicdlg" class="easyui-dialog" data-options="modal:true" style="width: 35%; height: 50%; padding: 5px 10px;top:30%" closed="true">
			<form id="form_all_biological" class="layui-form" method="post" enctype="multipart/form-data" style="margin-top: 6px;">
				<input id="handf" class="easyui-filebox" name="file1" style="width: 100%;" data-options="buttonText:'选择',prompt:'请选择文件...',
   							 multiple:true,label:'图片上传',prompt:'选择图片（2M以内）' ">
				<hr />
				<div id="handimage" style="margin-left:20px;margin-top:10px ;"></div>
			</form>
		</div>
		<!--
        	提取人双向选择框窗口
        -->
		<div id="dlg2" class="easyui-dialog" data-options="modal:true" style="width: 26%; height: 42%; padding: 5px 10px;top:30%" closed="true" >
			<table style="margin-left: 15px;margin-top: 10px;">
				<tr>
					<td>
						<div id="dl1" style="height:200px;width:150px;"></div>
					</td>
					<td>
						<button id="dl_add" class="easyui-linkbutton" style="width:50px;margin:5px;">添加</button><br />
						<button id="dl_add_all" class="easyui-linkbutton" style="width:50px;margin:5px;">全选</button><br />
						<button id="dl_remove_all" class="easyui-linkbutton" style="width:50px;margin:5px;">全移</button><br />
						<button id="dl_remove" class="easyui-linkbutton" style="width:50px;margin:5px;">移除</button>
					</td>
					<td>
						<div id="dl2" style="height:200px;width:150px;"></div>
					</td>
				</tr>
			</table>
		</div>
		<!--
        	添加窗口
        -->
		<div id="dlg" class="easyui-dialog" data-options="modal:true"  style="width: 100%; height: 90%; padding: 5px 10px;top:50px" closed="true" >
			<form id="handForm" method="post" enctype="multipart/form-data">
				<div id="div">
					<table class="form_table"  id="form_table">
						<tr>
							<td    class="td_left" >
								序号：
							</td>
							<td class="td_right"><input name="serialNo" class="easyui-textbox" style="width:99.5%" readonly="readonly" id="serialNo" value="1" /></td>

							<td  class="td_left"    >
								痕迹照片： <font> *</font>
							</td>
							<td class="td_right"><input class="easyui-filebox"  name="file" data-options="buttonText:'选择',prompt:'请选择文件...'" style="width:99.5%" /></td>

							<td class="td_left" >
								物证名称： <font> *</font>
							</td>
							<td class="td_right"><input class="easyui-textbox" style="width:99.5%" /></td>

						</tr>
						<tr>
							<td class="td_left">
								提取人： <font> *</font>
							</td>
							<td class="td_right"><input class="tiquren"  id="man1" onclick="addMan(this)" style="width:99.5%" /></td>

							<td class="td_left">
								提取日期：
							</td>
							<td class="td_right"><input class="easyui-datebox" style="width:99.5%" /></td>
							<td class="td_left">
								遗留部位： <font> *</font>
							</td>
							<td class="td_right"><input class="easyui-textbox" style="width:99.5%" /></td>

						</tr>
						<tr>
							<td class="td_left">
								手印类型： <font> *</font>
							</td>
							<td class="td_right" colspan="3">
								<label style="margin-left: 20px;">指纹</label><input type="radio" checked="checked" name="type" value="指纹">
								<label style="margin-left: 20px;">指节纹</label><input type="radio" name="type" value="指节纹">
								<label style="margin-left: 20px;">掌纹</label><input type="radio" name="type" value="掌纹">
								<label style="margin-left: 20px;">手套印</label><input type="radio" name="type" value="手套印">
								<label style="margin-left: 20px;">其他手印痕迹</label><input type="radio" name="type" value="其他手印痕迹">
							</td>
							<td class="td_left">
								基本特征：
							</td>
							<td class="td_right"><input class="easyui-textbox tdwidth" style="width:99.5%" /></td>
						</tr>
						<tr>
							<td class="td_left" >提取方法：<font> *</font></td>
							<td class="td_right" colspan="5">
								<label style="margin-left: 20px;">直接照相</label><input type="radio" checked="checked" name="takeff" value="直接照相">
								<label style="margin-left: 20px;">粉末/胶带纸</label><input type="radio" name="takeff" value="粉末/胶带纸">
								<label style="margin-left: 20px;">粉末/照相</label><input type="radio" name="takeff" value="粉末/照相">
								<label style="margin-left: 20px;">502/照相</label><input type="radio" name="takeff" value="502/照相">
								<label style="margin-left: 20px;">DFO/照相</label><input type="radio" name="takeff" value="DFO/照相">
								<label style="margin-left: 20px;">茚三酮/照相</label><input type="radio" name="takeff" value="茚三酮/照相">
								<label style="margin-left: 20px;">硝酸银/照相</label><input type="radio" name="takeff" value="硝酸银/照相">
								<label style="margin-left: 20px;">碘熏/照相</label><input type="radio" name="takeff" value="碘熏/照相">
								<label style="margin-left: 20px;">其它/照相</label><input type="radio" name="takeff" value="其它/照相">
							</td>

						</tr>
						<tr>
							<td class="td_left" >
								提交指纹系统：

							</td>
							<td class="td_right">
								<input type="checkbox" name="a" value="1">

							</td>
							<td class="td_left">
								是否列入现场提取登记表：
							</td>
							<td class="td_right" colspan="3">
								<input type="checkbox" name="b" value="1">

							</td>

						</tr>
					</table>
				</div>
			</form>

		</div>

		<!--
        datagridbar工具栏
        -->
		<div id="handGridToolbar" style="display: none;">
			<a class="actions add easyui-linkbutton " iconCls="icon-add" plain="true">新增</a>
			<a class="actions manypicture easyui-linkbutton " iconCls="icon-large-picture" plain="true">批量上传</a>
			<a class="actions remove easyui-linkbutton " iconCls="icon-remove" plain="true">删除</a>
		</div>
		<table id="handdatagrid">
		</table>
		<div id="content_div">
			<div id="content_div_left">
				<table border="1" cellspacing="0" cellpadding="0" width="100%" style="border-color: #CEEBFF;font-size: 12px;">
					<th colspan="4" id="left_table_th" style="background-image: url(images/pictitle.gif);">
						<svg style="width: 1em;height: 1em;vertical-align: -0.1em;fill: currentColor;overflow: hidden;" aria-hidden="true ">
							<use xlink:href="#icon-shou "></use>
						</svg>手印照片缩略图显示（双击小图看大图）</th>
					<tr>
						<td class="left_table_td">
							<img title="双击查看大图"  class="left_table_td_img" src="easyui/themes/bootstrap/images/passwordbox_close.png"> &nbsp;&nbsp;&nbsp;
						</td>
						<td class="left_table_td">
							<img title="双击查看大图"  class="left_table_td_img"  src="easyui/themes/bootstrap/images/passwordbox_close.png"> &nbsp;&nbsp;&nbsp;
						</td>
						<td class="left_table_td">
							<img title="双击查看大图"  class="left_table_td_img" src="easyui/themes/bootstrap/images/passwordbox_close.png"> &nbsp;&nbsp;&nbsp;
						</td>
						<td class="left_table_td">
							<img  title="双击查看大图"  class="left_table_td_img"  src="easyui/themes/bootstrap/images/passwordbox_close.png"> &nbsp;&nbsp;&nbsp;
						</td>
					</tr>
					<tr>
						<td class="left_table_tdNumber" >
							<a ondblclick="" href="">1 </a>
						</td>
						<td class="left_table_tdNumber">
							<a ondblclick="" href="">2 </a>
						</td>
						<td class="left_table_tdNumber">
							<a ondblclick="" href="">3 </a>
						</td>
						<td class="left_table_tdNumber">
							<a ondblclick="" href="">4 </a>
						</td>
					</tr>
					<!-- 最后一行 -->

				</table>
			</div>
			<div style="float:left; border:1px solid #CEEBFF;width:29.6%;height: 100%;">
				<table id="handtableinfo" border="1" bordercolor="#CEEBFF" cellspacing="0" cellpadding="0" style="width:100%;font-size: 12px;">
					<tr>
						<th colspan="2" style="font-size:12px;height:32px;background-image: url(images/pictitle.gif);"><label style="float:left;margin-top: 5px;"> <svg style="width: 1em;height: 1em;vertical-align: -0.1em;fill: currentColor;overflow: hidden;" aria-hidden="true ">
						<use xlink:href="#icon-shou "></use>
					</svg>手印基本信息</label>
							<a style="float: right;" class="easyui-linkbutton" plain="true" id="editHandInfo" iconcls="icon-edit">编辑</a>
						</th>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">序号 </td>
						<td>1</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">物证名称 </td>
						<td>22</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">手印类型 </td>
						<td>指纹</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">指纹编码 </td>
						<td>1</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">遗留部位 </td>
						<td> 2</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">基本特征 </td>
						<td>直接拍照</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取方法 </td>
						<td></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取人 </td>
						<td> 测试、公共查询用户</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取日期 </td>
						<td>2019-04-25</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提交指纹系统 </td>
						<td>否</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">指纹状态跟踪 </td>
						<td>未发送 </td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">是否列入现场提取登记表</td>
						<td>是</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">上传时间 </td>
						<td>2019-04-25 10:18 </td>
					</tr>

				</table>
				<table id="handtableinfo_edit" border="1" bordercolor="#CEEBFF" cellspacing="0" cellpadding="0" style="width:99%;display: none;font-size: 12px;">
					<tr>
						<th colspan="2" style="font-size:12px;height:32px;background-image: url(images/pictitle.gif);"><label style="float:left;margin-top: 5px;"> <svg style="width: 1em;height: 1em;vertical-align: -0.1em;fill: currentColor;overflow: hidden;" aria-hidden="true ">
						<use xlink:href="#icon-shou "></use>
					</svg>手印基本信息</label>
							<a style="float: right;" class="easyui-linkbutton" plain="true" iconcls="icon-edit">手印处理</a>
						</th>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">序号 </td>
						<td >1</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">物证名称 </td>
						<td ><input   type="text" class="tiquren" ></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">手印类型 </td>
						<td> <label>指纹</label><input type="radio" name="handp" value="指纹">
							<label>指节纹</label><input type="radio" name="handp" value="指节纹">
							<label>掌纹</label><input type="radio" name="handp" value="掌纹">
							<label>手套印</label><input type="radio" name="handp" value="手套印">
							<label>其他手印痕迹</label><input type="radio" name="handp" value="其他手印痕迹"></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">指纹编码 </td>
						<td><input   type="text" class="tiquren" ></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">遗留部位 </td>
						<td><input   type="text" class="tiquren" ></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">基本特征 </td>
						<td><input   type="text" class="tiquren" ></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取方法 </td>
						<td><label style="margin-left: 20px;">直接照相</label><input type="radio" checked="checked" name="takeff" value="直接照相">
							<label style="margin-left: 20px;">粉末/胶带纸</label><input type="radio" name="takeff" value="粉末/胶带纸">
							<label style="margin-left: 20px;">粉末/照相</label><input type="radio" name="takeff" value="粉末/照相">
							<label style="margin-left: 20px;">502/照相</label><input type="radio" name="takeff" value="502/照相">
							<label style="margin-left: 20px;">DFO/照相</label><input type="radio" name="takeff" value="DFO/照相">
							<label style="margin-left: 20px;">茚三酮/照相</label><input type="radio" name="takeff" value="茚三酮/照相">
							<label style="margin-left: 20px;">硝酸银/照相</label><input type="radio" name="takeff" value="硝酸银/照相">
							<label style="margin-left: 20px;">碘熏/照相</label><input type="radio" name="takeff" value="碘熏/照相">
							<label style="margin-left: 20px;">其它/照相</label><input type="radio" name="takeff" value="其它/照相"></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取人 </td>
						<td> <input   type="text" class="tiquren" id="m" onclick='addMan(this)'></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取日期 </td>
						<td><input class="easyui-datebox" style="width:200px"/></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提交指纹系统 </td>
						<td><input type="checkbox" name="a" value="1"></td>
					</tr>

					<tr>
						<td style="background-color: #EEF5FF;width:30%">是否列入现场提取登记表</td>
						<td><input type="checkbox" name="b" value="1"></td>
					</tr>
					<tr>
						<td colspan="4" style="text-align: center;">
							<a class="easyui-linkbutton" id="" iconcls="icon-edit">保存</a>
							<a class="easyui-linkbutton" id="handedit_back" iconcls="icon-cancel">取消</a>
						</td>
					</tr>
				</table>

			</div>
		</div>
		<script>
			$(function() {
				
			var rowNum = 1;
			var Extperson; //提取人id
				
				$("#handdatagrid").datagrid({
					rownumbers: false,
					nowrap: false,
					 width: $(window).width(),
					border: true,
					toolbar: '#handGridToolbar',
				})
				var handdatagridPanel = $("#handdatagrid").datagrid("getPanel");
				handdatagridPanel.on("click", "a.add", function() {
					$("#dlg").dialog({
						buttons: [{
								text: "添加",
								iconCls: "icon-save",
								handler: function() {
									rowNum = rowNum + 1;
									/*	$("#serialNo").textbox('setValue',rowNum);	
									var iTable = $("#form_table").clone();
									$("#div").append(iTable);*/

									var table = "<div><table class='form_table' id='form_table" + rowNum + "' border='1' cellspacing='0' cellpadding='0' width='100%' style='border-color: #EEF5FF;'margin-top:15px;'>" +
										"<tr>" +
										"<td class='td_left'>" +
										"序号：" +
										"</td>" +
										"<td id='td_right'><input class='easyui-textbox' style='width:100%' readonly='readonly' value=" + rowNum + "></td>" +
										"<td class='td_left' >" +
										"痕迹照片：" +
										"</td>" +
										"<td class='td_right'><input class='easyui-filebox'  name='file' data-options=" + "buttonText:'选择',prompt:'请选择文件...'" + " style='width:100%' /></td>"

										+
										"<td class='td_left'>" +
										"物证名称：" +
										"</td>" +
										'<td width="17%"><input class="easyui-textbox"  style="width:100%;" /></td>'

										+
										"</tr>" +
										"<tr>" +
										"<td class='td_left' >" +
										"提取人：" +
										"</td>" +
										"<td class='td_right'><input class='tiquren' id='man" + rowNum + "' onclick='addMan(this)' style='width:100%' /></td>"

										+
										"<td class='td_left'>" +
										"提取日期：" +
										"</td>" +
										"<td class='td_right'><input class='easyui-datebox'  style='width:100%' /></td>" +
										"<td class='td_left'>遗留部位：</td>" +
										'<td class="td_right"><input class="easyui-textbox"  style="width:100%;" /></td>' +
										"</tr><tr>" +
										"<td class='td_left' >手印类型：</td>"

										+
										"<td colspan='3'><label style='margin-left: 20px;'>指纹</label><input    type='radio' checked='checked' name='type" + rowNum + "' value='指纹'><label style='margin-left: 20px;'>指节纹</label><input    type='radio' name='type" + rowNum + "' value='指节纹'><label style='margin-left: 20px;'>掌纹</label><input    type='radio' name='type" + rowNum + "' value='掌纹'><label style='margin-left: 20px;'>手套印</label><input    type='radio' name='type" + rowNum + "' value='手套印'><label style='margin-left: 20px;'>其他手印痕迹</label><input    type='radio' name='type" + rowNum + "' value='其他手印痕迹'></td>" +
										"<td class='td_left' '>基本特征：</td>" +
										'<td width="17%"><input class="easyui-textbox"  style="width:100%;" /></td>' +
										"</tr><tr><td class='td_left' >提取方法：</td>" +
										"<td colspan='5'><label style='margin-left: 20px;'>直接照相</label><input    type='radio' checked='checked' name='takeff" + rowNum + "' value='直接照相'><label style='margin-left: 20px;'>粉末/胶带纸</label><input    type='radio' name='takeff' value='粉末/胶带纸'>" +
										"<label style='margin-left: 20px;'>粉末/照相</label><input    type='radio' name='takeff" + rowNum + "' value='粉末/照相'>" +
										"<label style='margin-left: 20px;'>502/照相</label><input    type='radio' name='takeff" + rowNum + "' value='502/照相'>" +
										"<label style='margin-left: 20px;'>DFO/照相</label><input    type='radio' name='takeff" + rowNum + "' value='DFO/照相'>" +
										"<label style='margin-left: 20px;'>茚三酮/照相</label><input    type='radio' name='takeff" + rowNum + "' value='茚三酮/照相'>" +
										"<label style='margin-left: 20px;'>硝酸银/照相</label><input    type='radio' name='takeff" + rowNum + "' value='硝酸银/照相'>" +
										"<label style='margin-left: 20px;'>碘熏/照相</label><input    type='radio' name='takeff" + rowNum + "' value='碘熏/照相'>" +
										"<label style='margin-left: 20px;'>其它/照相</label><input    type='radio' name='takeff" + rowNum + "' value='其它/照相'>" +
										"</td></tr><tr>" +
										"<td class='td_left'>提交指纹系统：</td><td>"
										+
										"<input    type='checkbox' name='a' value='1'></td>"
										+
										"<td class='td_left'>	是否列入现场提取登记表：</td>"
										+
										"<td colspan='3'><input    type='checkbox' name='b' value='1'></td></tr></table></div>"
									$("#handForm").append(table);
									$.parser.parse($("#handForm").parent());
								}
							}, {
								text: "删除",
								iconCls: "icon-remove",
								handler: function() {
									if(rowNum == 1) {
										return;
									}
									$("#form_table" + rowNum).remove();
									rowNum = rowNum - 1;
								}
							}, {
								text: "保存",
								iconCls: "icon-save",
								handler: function() {

								}
							}, {
								text: "取消",
								iconCls: "icon-cancel",
								handler: function() {
							$("#dlg").dialog("close");
								}
							}

						]
					});
					$("#dlg").dialog("open").dialog('setTitle', '手印基本信息新增');
				}).on("click", "a.manypicture", function() {
						$("#handpicdlg").dialog({
						buttons: [{
								text: "添加",
								iconCls: "icon-save",
								handler: function() {
								   	
								 }
								}, {
								text: "取消",
								iconCls: "icon-cancel",
								handler: function() {
							$("#handpicdlg").dialog("close");
								}
							}
						]
						});
					$("#handpicdlg").dialog("open").dialog('setTitle', '多图片上传');
					$("#handf").textbox('setValue','');
					$("#handimage").html('');
				}).on("click", "a.edit", function() {
					$("#dlg4").dialog("open").dialog('setTitle', '手印基本信息编辑');
				});

			})


			function addMan(obj) {
				Extperson = obj.id;
				$("#dlg2").dialog({
						buttons: [{
								text: "确定",
								iconCls: "icon-save",
								handler: function() {
								   	var selVal = '';
				var rows = $("#dl2").datalist('getRows');
				for(var i = 0; i < rows.length; i++) {
					selVal = selVal + rows[i].text + ",";
				};
				var value = selVal.substring(1, selVal.length - 1);
				$('#' + Extperson).val(value);
				$("#dlg2").dialog("close");
								 }
								}
						]
						});
				$("#dlg2").dialog("open").dialog('setTitle', '选择提取人');
			};
			
			//多文件上传
			$('#handf').filebox({
				onChange: function(value) {
					var f = $(this).next().find('input[type=file]')[0]; 
					if(f.files && f.files[0]) {
						// 更换图片时清空原图片展示内容
						      
						$('#handimage').html('');       
						for(var i = 0; i < f.files.length; i++) {        
							var reader = new FileReader(f.files[i]);        
							reader.onload = function(e) {
								//append为在元素中的末尾添加内容
								          
								$('#handimage').append("<img src='" + e.target.result + "' width='200px' height='100px'>");        
							}        
							reader.readAsDataURL(f.files[i]);
						}    
					}  
				}
			})

			$("#editHandInfo").click(function() {
				$("#handtableinfo").hide();
				$("#handtableinfo_edit").show();

			})
			$("#handedit_back").click(function() {
				$("#handtableinfo").show();
				$("#handtableinfo_edit").hide();
			})
			
	
				$('#dl1').datalist({
					url: 'json.json',
					method: 'get',
					valueField: 'value',
					textField: 'text',
					lines: false,
					checkbox: true,
					singleSelect: false
				});
				$('#dl2').datalist({
					//url:'file:///E:/prompt.json',
					//method:'get',	
					valueField: 'value',
					textField: 'text',
					lines: false,
					checkbox: true,
					singleSelect: false
				});

				//移动按钮
				$("#dl_add").click(function() {
					var rows = $("#dl1").datalist("getSelections");
					/*
					//方式1
					var rowArray = new Array();
					$(rows).each(function(i){
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value:value,
							text:text
						};
						rowArray.push(row);
						//删除
						var rowIndex = $("#dl1").datalist("getRowIndex", rows[i]);
						$("#dl1").datalist("deleteRow",rowIndex);
					});
					rowArray = rowArray.concat($("#dl2").datalist("getRows"));//合并
					var total = { "total":rowArray.length,rows:rowArray };
					$("#dl2").datalist("loadData",rowArray);
					*/
					//方式2
					$(rows).each(function(i) {
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value: value,
							text: text
						};
						//添加
						//$("#dl2").datalist("appendRow",row);
						$("#dl2").datalist("insertRow", {
							index: 0,
							row: row
						}); //作为第一条
						//删除
						var rowIndex = $("#dl1").datalist("getRowIndex", rows[i]);
						$("#dl1").datalist("deleteRow", rowIndex);
					});
					//移动完后重新加载dl2,否则显示不正常
					$("#dl2").datalist("loadData", $("#dl2").datalist('getRows'));
				});
				//移动按钮
				$("#dl_add_all").click(function() {
					var data = $("#dl1").datalist("getData");
					var rows = data.rows;
					var rowsLength = rows.length;
					var indexArray = new Array();
					for(var i = 0; i < rowsLength; i++) {
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value: value,
							text: text
						};
						//添加
						$("#dl2").datalist("appendRow", row);
					}
					//删除
					var rows = $("#dl1").datalist('getRows');
					for(var i = rows.length - 1; i >= 0; i--) {
						$("#dl1").datalist("deleteRow", i);
					}
					//移动完后重新加载dl2,否则显示不正常
					$("#dl2").datalist("reload");
				});
				$("#dl_remove").click(function() {
					var rows = $("#dl2").datalist("getSelections");
					/*
					//方式1
					var rowArray = new Array();
					$(rows).each(function(i){
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value:value,
							text:text
						};
						rowArray.push(row);
						//删除
						var rowIndex = $("#dl2").datalist("getRowIndex", rows[i]);
						$("#dl2").datalist("deleteRow",rowIndex);
					});
					rowArray = rowArray.concat($("#dl1").datalist("getRows"));//合并
					var total = { "total":rowArray.length,rows:rowArray };
					$("#dl1").datalist("loadData",rowArray);
					*/
					//方式2
					var rows = $("#dl2").datalist("getSelections");
					var rowArray = new Array();
					$(rows).each(function(i) {
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value: value,
							text: text
						};
						//添加
						//$("#dl1").datalist("appendRow",row);
						$("#dl1").datalist("insertRow", {
							index: 0,
							row: row
						}); //作为第一条
						//删除
						var rowIndex = $("#dl2").datalist("getRowIndex", rows[i]);
						$("#dl2").datalist("deleteRow", rowIndex);
					});
					//移动完后重新加载dl1,否则显示不正常
					$("#dl1").datalist("loadData", $("#dl1").datalist('getRows'));

				});
				$("#dl_remove_all").click(function() {
					var data = $("#dl2").datalist("getData");
					var rows = data.rows;
					var rowsLength = rows.length;
					var indexArray = new Array();
					for(var i = 0; i < rowsLength; i++) {
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value: value,
							text: text
						};
						//添加
						$("#dl1").datalist("appendRow", row);
					}
					//删除
					var rows = $("#dl2").datalist('getRows');
					for(var i = rows.length - 1; i >= 0; i--) {
						$("#dl2").datalist("deleteRow", i);
					}
					//移动完后重新加载dl1
					$("#dl1").datalist("reload");
				});
		
		</script>
	</body>

</html>